<template>
  <div class="dashboard">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-suffix=":" ref="formInlineRef">
      <el-form-item label="车牌号码"><el-input v-model="formInline.carNumber" placeholder="请输入车牌号码"
          clearable></el-input></el-form-item>
     
      <el-form-item label="缴费状态">
        <el-select v-model="formInline.paymentStatus" placeholder="请选择缴费状态" clearable>
          <el-option v-for="item in paymentStatusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btns"><el-button size="small" @click="resetForm('formInlineRef')">重置</el-button> <el-button
          size="small" type="primary" @click="fetchTableData">查询</el-button></el-form-item>
    </el-form>
    <v-table stripe border v-bind="tableObj" max-height="400" row-key="id" @fetchTableData="fetchTableData"
      ref="vTableRef">
    </v-table>


  </div>
</template>

<script>
import { getListAPI } from '@/apis/pay'
import { arrayToMap } from '@/utils/index'
export default {
  name: 'PayPage',
  data() {
    return {
      tableObj: {
        tableColumn: Object.freeze([
          { prop: 'carNumber', label: '车牌号码' },
          { prop: 'chargeType', label: '收费类型',formatter: (r, c, v) => this.chargeTypeMap[v] || '--'  },
          { prop: 'parkingTime', label: '停车总时长' },
          { prop: 'actualCharge', label: '缴纳费用（元）' },
          { prop: 'paymentStatus', label: '缴纳状态',formatter: (r, c, v) => this.paymentStatusMap[v] || '--'  },
          { prop: 'paymentMethod', label: '缴纳方式', formatter: (r, c, v) => this.payMethodMap[v] || '--' },
          { prop: 'paymentTime', label: '缴纳时间' },
        ]),
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },
        payload: {
          showSelection: false,
        }
      },
      dict: [],
      formInline: {
        carNumber: '',
        paymentStatus:'',
      },
      rowIds: [], //多选存储tableRow IDs


    }
  },
  beforeCreate() {
    this.payMethodList = [{ id: 'Alipay', name: '支付宝' }, { id: 'WeChat', name: '微信' }, { id: 'Cash', name: '线下' }]
    this.paymentStatusList = [{ id: '1', name: '已缴费' }, { id: '0', name: '待缴费' },{ id: '-1', name: '全部' }]
    this.payMethodMap = arrayToMap(this.payMethodList)
    this.paymentStatusMap=arrayToMap(this.paymentStatusList)
    this.chargeTypeMap={card:'月卡',temp:'临时停车'}
  },
  methods: {
    async fetchTableData() {
      const { currentPage, pageSize } = this.tableObj.pagination
      const { carNumber, paymentStatus } = this.formInline
      const params = {
        page: currentPage,
        pageSize: pageSize
      }
      carNumber && (params.carNumber = carNumber)
      paymentStatus !== '' && paymentStatus !== -1 && (params.paymentStatus = paymentStatus)
      const r = await getListAPI(params)
      const data = r.data
      this.tableObj.tableData = Object.freeze(data.rows)
      this.tableObj.pagination.total = data.total
    },
    resetForm(formNameRef) {
      this.formInline = {
        carNumber: '',
        paymentStatus: ''
      }
    },


  },
  created() {
    this.fetchTableData()
  },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.el-form.demo-form-inline {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 340px) 300px 1fr;
  grid-auto-rows: auto;

  .btns {
    justify-self: flex-end;
  }

}
</style>